﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>海域船舶检测</title>

    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var html=$(".wrap ul").html()
		$(".wrap ul").append(html)
		var ls=$(".wrap li").length/2+1
		i=0
		ref = setInterval(function(){
			i++
			if(i==ls){
				i=1
				$(".wrap ul").css({marginTop:0})
				$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
			}
	    	$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


		},2400);



				var html2=$(".adduser ul").html()
		$(".adduser ul").append(html2)
		var ls2=$(".adduser li").length/2+1
		a=0
		ref = setInterval(function(){
			a++
			if(a==ls2){
				a=1
				$(".adduser ul").css({marginTop:0})
				$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
			}
	    	$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)


		},4300);








	})
</script>
<body style='overflow:-Scroll;overflow-y:hidden'>
    <div class="loading">
        <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head" style="display: flex">
        <div class="bar" style="display: flex;width: 20%;height: 80%">
            <div class="barbox " style="display: flex;margin: 0 20px">
                <ul class="clearfix" style="display:flex;width: 100px;justify-content: center;align-items: center">
                    <li style="width: 100%;height: 90%"><a href="">首页</a></li>
                </ul>
            </div>
            <div class="barbox " style="display: flex;margin: 0 20px">
                <ul class="clearfix" style="display:flex;width: 100px;justify-content: center;align-items: center">
                    <li style="width: 100%;height: 90%"><a href="../科普/index.html">科普</a></li>
                </ul>
            </div>
            <div class="barbox " style="display: flex;margin: 0 20px">
                <ul class="clearfix" style="display:flex;width: 100px;justify-content: center;align-items: center">
                    <li style="width: 100%;height: 90%"><a href="../算法/index.html">算法</a></li>
                </ul>
            </div>

        </div>
        <h1  style="display: flex;width: 60%;height: 100%;justify-content: center;align-items: center"><a
                href="https://gitee.com/iGaoWei/big-data-view"
                                                              style="color: white">海域船舶检测大屏</a></h1>
        <div class="weather"
             style="display: flex;width: 20%;height: 100%;justify-content: flex-end;align-items: center"><span
                id="showTime"></span></div>
		<script>
            var t = null;
            t = setTimeout(time, 1000); 
            function time() {
                clearTimeout(t); 
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); 
                var m = dt.getMinutes(); 
                var s = dt.getSeconds(); 
                document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000);  
            }

        </script>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 5.2rem">
                    <div class="alltitle">船舶检测数据</div>

                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2>1824</h2><span>本月检测数量</span></li>
                            <li><h2>1920</h2><span>上月检测数量</span></li>
                            <li><h2>5%</h2><span>环比增长</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li><h2>824</h2><span>主机(20001)</span></li>
                            <li><h2>710</h2><span>主机(20003)</span></li>
                            <li><h2>200</h2><span>主机(20002)</span></li>
                        </ul>


                    </div>
					 <div class="addnew" >
                        <div class="tit02"><span>检测数据</span></div>
                        <div class="allnav" style="height: 2.2rem" id="wbzl"></div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 4.9rem">
                    <div class="alltitle">雷达检测报告</div>
                   <div class="allnav" style="height: 1.5rem" id="wxyg"></div>
				   <div class="addnew" >
                        <div class="tit02"><span>检测抓拍</span></div>
                       <img src="./images/船1.png" alt="" style="width: 400px;height: 200px">
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox ">
                        <ul class="clearfix">
                            <li  class="pulll_left counter">
								6069
							</li>
                            <li class="pulll_left counter">410</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">检测单位数量</li>
                            <li class="pulll_left">雷达检测主机数量</li>
                        </ul>
                    </div>
                </div>
				<div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">81189</li>
                            <li class="pulll_left counter">39410</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">总数量</li>
                            <li class="pulll_left">总报警数量</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="images/lbx.png"></div>
                    <div class="map2"><img src="images/jt.png"></div>
                    <div class="map3"><img src="images/map.png"></div>
                    <div class="map4" id="map_1"></div>
                </div>
				 <div class="boxall" style="height: 3.4rem">
                    <div class="alltitle">卫星预警</div>
                    <div>
                        <img src="./images/卫星.jpg" alt="" style="width: 600px;height: 250px">
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:6rem">
                    <div class="alltitle">报警</div>
                    
                    <div class="clearfix">
                        <div class="sy" style="width:300px;" id="yqbj"></div>
                    </div>
                    <div class="addnew" >
                        <div class="tit02"><span>最新检测报告</span></div>
                        <div class="adduser"  style="height: 2.0rem">
                            <ul >
                                <li class="clearfix"> <span class="pulll_left">xx海域</span> <span
                                        class="pulll_right">经度--46.197128；纬度--39.916527</span> </li>
                                <li class="clearfix"> <span class="pulll_left">xx海域</span> <span
                                        class="pulll_right">经度--116.325128；纬度--49.856527</span> </li>
                                <li class="clearfix"> <span class="pulll_left">xx海域</span> <span
                                        class="pulll_right">经度--86.741128；纬度--38.654527</span> </li>
                                <li class="clearfix"> <span class="pulll_left">xx海域</span> <span
                                        class="pulll_right">经度--46.391428；纬度--19.725527</span> </li>
								<li class="clearfix"> <span class="pulll_left">xx海域</span> <span
                                        class="pulll_right">经度--11.787128；纬度--3.116927</span> </li>
								<li class="clearfix"> <span class="pulll_left">xx海域</span> <span
                                        class="pulll_right">经度--16.397118；纬度--9.316547</span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2rem;margin-top: 100px" >
                    <div class="alltitle">实时检测</div>
						<div class="grid" >
							<span class="line"></span>
						</div>
						 <div >
                            <span style="color: #fff;opacity:.5">本月报警数量 ：</span><span style="color: #DC143C;font-size:.1rem;    font-weight: bold;">809</span>
							 <span style="margin-left:15%;color: #fff;opacity:.5">上月报警数量 ：</span><span style="color: #ffeb7b;font-size:.1rem;    font-weight: old;">109</span>
						</div>

                    <div class="boxfoot"></div>
                </div>

            </li>
        </ul>
 
    </div>
    <div class="back"></div>
    <script type="text/javascript" src="js/echarts.min.js"></script>
	 <script type="text/javascript" src="js/echarts-gl.min.js"></script>
	    <script language="JavaScript" src="js/echarts-tool.js"></script>
<script type="text/javascript" src="js/timelineOption.js"></script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script type="text/javascript">
        $('.counter').countUp();
    </script>

</body>
</html>

<style>


    .grid {
        margin-top:5%;
        width:80%;
        height: 10px;
        display: grid;
        grid-template-columns: repeat(20, 1fr);
        grid-column-gap: 14px;
    }

    .line {
        position: relative;
        width: 90%;
        height: 7px;
    }
    .line::before, .line::after {
        content: '';
        position: absolute;
        width: 4.5rem;
        height: 100%;
        border-radius: 7px;
        background-color: #FF0000;
    }
    .line::before {
        animation: first-line ease-in-out 4s var(--delay) infinite alternate;
    }
    .line::after {
        bottom: 0;
        background-color: #B22222;
        width: calc(80% - 10px);
        animation: second-line ease-in-out 4s var(--delay) infinite alternate;
    }
    .line:nth-child(1) {
        --delay: calc(-0.1s);
    }


    @keyframes first-line {
        70% {
            width: calc(80% - 10px);
        }
        100% {
            background-color: #FF0000;
        }
    }
    }
</style>
